import React, {Component} from 'react';
import {Image, StyleSheet, Text, View,TouchableOpacity} from 'react-native';

export default class Self extends Component {
  render() {
    return (
        <View style={{ flex: 1 }}>
            <View style={styles.top_view}>
                <Image resizeMode={'contain'} source={{ uri: 'icon_logo_white' }} style={{ height: 30, width: 30 }} />
                <Text style={{ flex: 1, textAlign: 'center', marginLeft: -40, fontSize: 18, fontWeight: 'bold', fontFamily: 'scratchmyback', color: '#fff' }}>我的</Text>
            </View>
            <View style={styles.container}>
                <View style = {{flex:1,backgroundColor:'#AC1E1A',flexDirection: 'row',alignItems:'center',justifyContent:'center'}}>
                    <Image resizeMode={'contain'} style={{width:80,height:80}} source={{ uri: 'icon_logo_white' }} />
                    <TouchableOpacity onPress={()=>{
                            this.props.navigation.navigate('Login');
                        }}>
                        <Text style = {{fontSize:16,color:'#fff',marginLeft:30,fontWeight: 'bold',}}>自己的账号</Text>
                    </TouchableOpacity>
                    <Image resizeMode={'contain'} style={{width:15,height:15,marginLeft:15}} source={{ uri: 'male' }} />
                </View>
                <View style = {{flex:2,backgroundColor:'#ffffff'}}>
                    <View style={styles.lineStyle}>
                        <Image resizeMode={'contain'} style={{width:20,height:20,marginRight:10}} source={{ uri: 'icon_message' }}/>
                        <Text style={styles.lineTextStyle}>我的消息</Text>
                        <Image resizeMode={'contain'} style={{width:20,height:15}} source={{ uri: 'icon_arrow_right' }}/>
                    </View>
                    <View style={styles.lineStyle}>
                        <Image resizeMode={'contain'} style={{width:20,height:20,marginRight:10}} source={{ uri: 'icon_collect_my' }}/>
                        <Text style={styles.lineTextStyle}>我的收藏</Text>
                        <Image resizeMode={'contain'} style={{width:20,height:15}} source={{ uri: 'icon_arrow_right' }}/>
                    </View>
                    <View style={styles.lineStyle}>
                        <Image resizeMode={'contain'} style={{width:20,height:20,marginRight:10}} source={{ uri: 'icon_cache' }}/>
                        <Text style={styles.lineTextStyle}>清空缓存</Text>
                        <Image resizeMode={'contain'} style={{width:20,height:15}} source={{ uri: 'icon_arrow_right' }}/>
                    </View>
                    <View style={styles.lineStyle}>
                        <Image resizeMode={'contain'} style={{width:20,height:20,marginRight:10}} source={{ uri: 'icon_version' }}/>
                        <Text style={styles.lineTextStyle}>版本介绍</Text>
                        <Image resizeMode={'contain'} style={{width:20,height:15}} source={{ uri: 'icon_arrow_right' }}/>
                    </View>
                    <View style={{backgroundColor:'#EEEEEE',height:1,marginTop:30}}/>
                    <View style={styles.lineStyle}>
                        <Image resizeMode={'contain'} style={{width:20,height:20,marginRight:10}} source={{ uri: 'sign_out' }}/>
                        <Text style={styles.lineTextStyle}>退出登录</Text>
                        <Image resizeMode={'contain'} style={{width:20,height:15}} source={{ uri: 'icon_arrow_right' }}/>
                    </View>
                </View>
            </View>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height:100
  },
  top_view:{
      flexDirection: 'row',
      padding: 10,
      alignItems:'center',
      backgroundColor:'#AC1E1A',
      elevation:2
  },
    lineStyle:{
        flexDirection: 'row',
        padding: 12,
        alignItems:'center',
        backgroundColor:'#fff',
        elevation:1,
        marginTop:1
    },
    lineTextStyle:{
        color:'#343434',
        fontSize:16,
        flex:1
    }
});
